<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>DOM查询</title>
</head>
<body>
    <!--
        获取元素节点：
            document.getElementById();       通过id属性获取一个元素的节点
            document.getElementsByTagName(); 通过标签名获取一组元素节点对象
                这个方法给我们返回一个类数组对象，所有查询到的元素都会封装到对象中
            document.getElementsByName();    通过name属性获取一组元素节点对象

    -->

    <button id="btn" name="btnName" class="btns">我是一个按钮</button>

<script type="text/javascript">
    const btn = document.getElementsByTagName("button");
    for(let i = 0; i < btn.length; i++) {
       /**innerHTML用于获取元素内部的HTML代码的，对于自结束标签，这个属性则没有意义*/
    console.log(btn[i].innerHTML);
   }

   const btn02 = document.getElementsByName("btnName");
   for(let i = 0; i < btn02.length; i++) {
       /**如果需要读取元素节点的属性，直接使用元素.属性名,但是class属性不能采用这种方式，读取class属性时，需采用元素.className的方式*/
       console.log(btn02[i].name +"-----"+ btn02[i].id + "--------" + btn02[i].className);
   }
</script>
</body>
</html>